{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/my_wallet.css">

<style type="text/css">
	body{
		background-color: #f3f3f3;
	}
</style>
{/block}
{block name="content"}
<div class="title">
	
	<div class="go_back"></div>
	<p><strong>余额充值</strong></p>
</div>
	<div class="money_num" style="display: none;">
		<p>充值金额</p>
		<div class="input_num">
			<input type="number" class="input_num_money" placeholder="自定义金额"  readonly="readonly" name="recharge_num"/>
		</div>
	</div>

	<div class="select_money">
		<p>选择充值金额</p>
		<div class="select_money_box">
			<div class="select_details">
				<div class="select_details_box" data-rechange="20">
					20元
				</div>
			</div>
			<div class="select_details">
				<div class="select_details_box select_details_box_active" data-rechange="50">
					50元
				</div>
			</div>
			<div class="select_details">
				<div class="select_details_box" data-rechange="100">
					100元
				</div>
			</div>
			<div class="select_details">
				<div class="select_details_box" data-rechange="200">
					200元
				</div>
			</div>
		</div>

		<div class="select_money_box">
			<div class="select_details">
				<div class="select_details_box" data-rechange="500">
					500元
				</div>
			</div>
			<div class="select_details">
				<div class="select_details_box" data-rechange="1000">
					1000元
				</div>
			</div>
			<div class="select_details">
				<div class="select_details_box" data-rechange="2000">
					2000元
				</div>
			</div>
			<div class="select_details">
				<div class="select_details_input">
					<input type="number" placeholder="自定义" id="self_rechange" onfocus="this.placeholder=''">
				</div>
			</div>
		</div>

		<!--<div style="margin-top: 2%; padding-left: 3.2%;">-->
			<!--<p style="font-size:0.6rem;">充值500送“氪金大佬lv1 ”头衔</p>-->
			<!--<p style="font-size:0.6rem;">充值5000送“氪金大佬lv2 ”头衔</p>-->
			<!--<p style="font-size:0.6rem;">充值10000送“氪金大佬lv3 ”头衔</p>-->
			<!--<p style="font-size:0.6rem;">充值50000送“氪金大佬lv4 ”头衔</p>-->
		<!--</div>-->

	</div>

	<div class="choose_pay">
		<div class="title">选择支付方式</div>
		<div class="pay">
			<i class="icon_pay zhifubao"></i>
			<p>支付宝支付</p>
			<span class="paymethod on"><input type="radio" id="alipay" checked="checked" name="pay_method" value="alipay"  class="radioclass"></span>
		</div>
		<div class="pay">
			<i class="icon_pay weixin"></i>
			<p>微信支付</p>
			<span class="paymethod"><input type="radio" name="pay_method" value="wx_pay" class="radioclass"></span>
		</div>
	</div>

	<button class="confirm" id="zhifu">确认充值</button>

	<div id="tip"  style="display:none; width: 80%; margin:auto; background: #fff;color: #FF6600; border: 1px solid #ff6600; text-align: center;padding: 10px;border-radius: 10px; margin-top: 20%;">
		最低充值为20元哦( • ̀ω•́ )✧
	</div>

{/block}
{block name="js"}

<script type="text/javascript">
{literal}
	var is_click = false
	$(".pay").on("click",function(){
  		$(this).children('span').addClass("on");
  		 $(this).children('span').children("input").prop("checked",true);

  		// $(this).parents("div").siblings("div").children("input").attr("checked","false");
  		$(this).siblings("div").children("span").removeClass("on");

//  		var val_payPlatform = $('.choose_pay input[name="pay_method"]:checked ').val();
//  		console.log(val_payPlatform);
	})

	$('#zhifu').on('click',function(){
		if (is_click == true) return;
		is_click = true;

		// alert('支付');
		var payway = $('[name="pay_method"]:checked').val();

		var recharge_num = $('input[name="recharge_num"]').val();
		console.log(payway);
		console.log(recharge_num);
        limitInput(recharge_num);
		if(payway == ''){
			toast('请选择支付方式','fail');
			is_click = false;
			return;
		}
		if(recharge_num == ''){
			toast('请输入充值金额', 'fail');
			is_click = false;
			return;
		}

        if(recharge_num < 20){
            toast('最低充值为20元哦( • ̀ω•́ )✧', 'fail');
            is_click = false;
            return;
        }

		$.ajax({
			url:'/FrontUserCenter/payment',
			type:'post',
			data:{recharge_num:recharge_num, payway:payway},
			success:function(r){
				console.log(r);
				if(r.code == 0){
					native_listen(payway,{
						parameter : r.parameter,
					});
				}else{
					toast('充值失败', 'fail');
					// layer.open({
					// 	content: '支付失败',
					// 	title: false,
					// 	btn: ['确定'],
					// });
				}
				is_click = false;
			}
		})


	})

	$('.return_icon').on('click',function(){
		window.location.href ='/Index/my_wallet'
	});

//选择充值金额start
	$('.input_num_money').val(50);
    $('.select_details_box').on('click', function(){
        $('.select_details_box').removeClass('select_details_box_active');
        $(this).addClass('select_details_box_active');
//        console.log($(this).attr('data-rechange'));
        $('.input_num_money').val($(this).attr('data-rechange'));
    })
	$('#self_rechange').keyup(function () {
       $('.input_num_money').val($('#self_rechange').val());
    })


	$('.select_details_input').on('click', function(){
		$('.select_details_box').removeClass('select_details_box_active');

	})

	function limitInput(o){
        console.log(o);
		var value = o;
		var min = 20;
		if(parseInt(value)<min){
			$('#tip').show();
			o.value = '';
            setTimeout(function(){
                $('#tip').hide();
            },2000)
			return false;
		}
	}
		//选择充值金额end
</script>

{/literal}
{/block}